<template>

	<view class="content">
		<view class="container">

			<!-- 补货选购的商品 -->
			<view class="replishList">
				<view class="goodItem" v-for="subItem in selectedList">
					<view class="goodImage">
						<image :src="subItem.productDetailImg" mode="aspectFill"></image>
					</view>
					<view class="goodDesc">
						<view class="goodName">
							{{subItem.productName}}
						</view>

						<view class="specific">
							{{subItem.productDetailSpecifications}}
						</view>

						<view class="priceAndNum">
							<!-- 价格区域 -->
							<view class="price">
								<view class="nowPrice">
									￥{{ caluateDiscount( subItem.productDetailPrice)}}
								</view>
							</view>
							<!-- 进步器区域 -->
							<view class="steeper">
								<steeper :itemNum="subItem.quantity" @add="num=>toAdd(num,subItem.id)"
									@minus="num=>toMinus(num,subItem.id)" @blur="num=>toBlur(num,subItem.id)">
								</steeper>

							</view>

						</view>


					</view>
				</view>

			</view>


			<!-- 付款方式 -->
			<view class="payType">
				<view class="title">
					付款方式
				</view>
				<view class="payWay">
					对公打款
				</view>
			</view>



			<!-- 兜底用到的提示卡片 -->
			<view class="mask" v-if="isShow"></view>
			<errHintCard :isShowHint="isShow" @closeHint="closeHint()"></errHintCard>
		</view>
		<!-- 底部的提交订单 -->
		<view class="orderFooter">

			<view class="desc">
				总计
			</view>
			<view class="totalPrice">
				￥{{caluateDiscount( totalPrice)}}
			</view>



			<view class="confirmButton" @click="toPayByPublic()">
				提交订单
			</view>
		</view>

	</view>

</template>

<script>
	import * as serviceOrderApi from '@/api/serviceOrder/serviceOrder.js'
	import steeper from '@/components/stepper.vue'
	import errHintCard from '@/components/goodsChangeHintCard/goodsChangeHintCard.vue'
	export default {
		components: {
			steeper,
			errHintCard
		},
		data() {
			return {
				//补货订单金额

				// 兜底支付的提示卡片
				isShow: false,
				// 向对公打款凭证区域传递的订单id,调用生成补货订单接口后台会返回
				serverUserOrders: '',
				totalPrice: 0,
				selectedList: null
			};
		},
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			//接收个人中心传来的订单类型
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				this.selectedList = receivedParams.selectedList;
				this.totalPrice = receivedParams.totalPrice;
			}
		},
		methods: {
			//根据服务商类型进行打折
			caluateDiscount(price) {
				
				if (this.$globalData.userType !== null) {
					
					if (this.$globalData.userType === 1) {
						return Number(0.5 * price).toFixed(2)
					} else {
						
						return Number(0.4 * price).toFixed(2)
					}
				}
			},
			//兜底关闭弹窗并退出
			closeHint() {
				this.isShow = false;
				uni.$goBack();
			},
			//计算商品总价
			getSelectedTotalPrice() {
				this.totalPrice = this.selectedList.reduce((total, item) => {
					// 计算每个子商品的价格，productDetailPrice * quantity
					const itemTotal = item.productDetailPrice * item.quantity;
					// 累加到总和上
					return total + itemTotal;
				}, 0); // 初始总和为 0
			},

			// 在补货清单对子商品的数量进行加减
			toAdd(num, id) {
				this.selectedList.forEach(item => {
					if (item.id === id) {
						
						item.quantity = num;
					}
				});
				this.getSelectedTotalPrice()

			},

			toMinus(num, id) {
				this.selectedList.forEach(item => {
					if (item.id === id) {
						
						item.quantity = num;
					}
				});
				this.getSelectedTotalPrice()
			},
			toBlur(num, id) {
				this.selectedList.forEach(item => {
					if (item.id === id) {
						
						item.quantity = num;
					}
				});
				this.getSelectedTotalPrice()
			},

			async toPayByPublic() {

				// 遍历 selectedList，提取 id 和 quantity，并封装成新对象
				const ordersDetailSimpleList = this.selectedList.map(item => {
					return {
						productDetailId: item.id,
						productDetailPrice:  Number(item.productDetailPrice).toFixed(2),
						productDetailSpecifications: item.productDetailSpecifications,
						productName: item.productName,
						ordersDetailNumber: item.quantity
					};
				});

				// 创建 generateOrders 对象并设置 ordersDetailSimpleList
				const generateOrders = {
					serverUserOrdersThingAmount: this.caluateDiscount(this.totalPrice),
					ordersDetailSimpleList: ordersDetailSimpleList,
					serverUserOrdersRemark: ""
				};

				



				// 在这里调用生成服务商补货订单的接口
				if (generateOrders != null) {
					const res = await serviceOrderApi.addServerUserOrders(generateOrders);
					
					if (res.data.code === 200) {
						this.serverUserOrders = res.data.data;
					} else if (res.data.code === 320 || res.data.code === 321) {
						this.isShow = true;
					}


				}

				uni.$toPage('/subpkg/ServiceProvider/publicPayForReplish/publicPayForReplish', {
					serverUserOrders: this.serverUserOrders,
					totalPrice: this.caluateDiscount(this.totalPrice)
				}, false, false, true)
			}
		},
		

	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		overflow: auto;
		
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: auto;
			margin-bottom: 230rpx;

			.replishList {
				// 商品列表
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				padding-top: 20rpx;
				align-items: center;
				overflow: auto;

				
				.goodItem {
					// 商品项
				    
					box-sizing: border-box;
					width: 694rpx;
					height: 226rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-bottom: 20rpx;
					background: rgba(255, 255, 255, 1);
					display: flex;
					padding-bottom: 30rpx;
					padding-right: 23rpx;
					position: relative;
				
					.goodImage {
						// 商品图片
				
						margin-top: 14rpx;
						margin-left: 14rpx;
						box-sizing: border-box;
						width: 178rpx;
						height: 178rpx;
						opacity: 1;
						border-radius: 8rpx;
				
						image {
							width: 100%;
							height: 100%;
						}
					}
				
					.goodDesc {
						// 商品描述区域
						margin-left: 26rpx;
						margin-top: 10rpx;
				
				
						.goodName {
							
							// 商品名称
						
							height: 86rpx;
							box-sizing: border-box;
							font-size: 32rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 46.34rpx;
							color: rgba(0, 0, 0, 1);
						}
				
						.discount {
							// 折扣信息
							
							
							margin-top: 20rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(179, 130, 75, 1);
						}
				
						.priceAndNum {
							// 价格和数量区域
							margin-top: 5rpx;
							display: flex;
							align-items: center;
							flex-direction: row;
							
						
							.price {
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-top: 20rpx;
				
								// 价格区域
				
								.nowPrice {
									// 现价
									box-sizing: border-box;
									height: 54rpx;
									font-size: 36rpx;
									font-weight: 700;
									letter-spacing: 0rpx;
									line-height: 52.12rpx;
									color: rgba(212, 48, 48, 1);
									text-align: left;
									vertical-align: top;
									overflow: hidden;
									text-overflow: ellipsis;
								}
				
								.prePrice {
									// 原价
									margin-left: 15rpx;
									font-size: 24rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 34.76rpx;
									text-decoration-line: line-through;
									color: rgba(167, 167, 167, 1);
				
								}
							}
				
							.steeper {
								// 数量调节器区域
								position: absolute;
								bottom: 30rpx;
								right: 23rpx;
								box-sizing: border-box;
				
				
								.goodsQuantity {
									width: 128rpx;
									height: 30rpx;
									opacity: 1;
									border-radius: 6rpx;
									background: rgba(212, 48, 48, 1);
									font-size: 20rpx;
									font-weight: 700;
									letter-spacing: 0rpx;
									line-height: 28.96rpx;
									color: rgba(255, 255, 255, 1);
									display: flex;
									justify-content: center;
									align-items: center;
								}
				
								.specitionSelect {
									margin-top: 4rpx;
									box-sizing: border-box;
									width: 128rpx;
									height: 44rpx;
									opacity: 1;
									border-radius: 6rpx;
									background: rgba(223, 161, 60, 1);
									font-size: 24rpx;
									font-weight: 500;
									letter-spacing: 0rpx;
									line-height: 34.76rpx;
									color: rgba(255, 255, 255, 1);
									display: flex;
									justify-content: center;
									align-items: center;
				
								}
				
				
								// 进货清单的进步器
								.steeperOperate {
									border: solid;
									width: 162rpx;
									height: 32rpx;
				
								}
				
				
				
							}
						}
				
						.specific {
							margin-top: 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 34.76rpx;
							color: rgba(85, 85, 87, 1);
						}
					}
				}
							
							
			}

			//付款方式
			.payType {
				padding: 0 48rpx;
				width: 594rpx;
				height: 104rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}



		}


		.orderFooter {
			// 订单底部区域
			z-index: 99999999;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			width: 750rpx;
			height: 176rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);


			.title {
				// 标题区域
				position: fixed;
				box-sizing: border-box;
				top: 28rpx;
				left: 24rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(0, 0, 0, 1);

			}

			.totalPrice {
				// 总价
				position: absolute;
				left: 136rpx;
				top: 24rpx;
				font-size: 36rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 52.12rpx;
				color: rgba(212, 48, 48, 1);

			}

			.desc {
				// 描述信息
				position: absolute;
				left: 52rpx;
				top: 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 28.96rpx;
				color: rgba(0, 0, 0, 1);
			}

			.confirmButton {
				// 提交订单按钮
				box-sizing: border-box;
				position: absolute;
				left: 490rpx;
				top: 14rpx;
				width: 230rpx;
				height: 74rpx;
				opacity: 1;
				border-radius: 26rpx;
				background: rgba(212, 48, 48, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(255, 255, 255, 1);


			}
		}

	}
</style>